@import url(http://fonts.googleapis.com/css?family=Open+Sans:100,400,300,500,600,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:100,400,300,600,700);

/*-----------------------------------------

Table of Contents:

General Layout Style
Page Title and Breadcrumb
Typography
Page Loading Progress Bar (PACE)
Page Top Bar
Sidebar Main Menu
Sidebar User Profile
Sidebar Fixed Bottom Graphs
Section or Content Box
Sortable / Drag n Drop panels(section boxes)
FORM ELEMENTS
BUTTONS
ICHECK (Checkboxes and Radios)
jQery UI Settings
Modals
Alert Notifications
Dropdown menu
Datepicker, Daterangepicker,  Datetimepicker & Colorpicker
Progress Bars
General Animation Settings
Tooltips
Popovers
Nestable list
Accordions
Tabs
UI Grid
UI Calendar
Timeline Centered Style
Timeline Left Aligned Style
Image Cropper
Pricing Tables
Tocify
FAQ
Portfolio gallery
jVector Maps
Tables
Data Tables
Form Editors
DropZone File Uploader (Drag n Drop)
UI Icons
Team Members
Login and Registration Page - Transparent Background Style
Display Code Wrappers
List Group
Breadcrumbs
Pagination
Labels
Badges
UI AJAX TREE
Flot Charts
Easy PIE Charts
Sparkline Charts
Page Layout - Sidebar, Chat API toggle interactions
COLLAPSED MENU
CHAT API
CHAT API Windows
Mailbox
Rickshaw Graph Charts
Dashboard
Notification Widget (Dashboard)
Error pages 404, 505
UI Sliders
Typeahead Suggestions
UI Lockscreen
Form Validations
Form Wizard
Carousel
Visibility Animation in Elements (Viewport)
Widget - Tile Counter
Widget - Tile Progress widget
Navigation Bars
Search page
Blogs
Invoice
Logo
Profile Page
Widget - To Do Task List
Widget - Social Media
Widget - Blogs
Widget - Sparkline Graphs
Widget - Vector Map
Widget - Weather
Widget - User Profile Tile
Form Spinners
UI Dropdowns
------------------------------------------*/
/*----------------------------------------
  General Layout Style
------------------------------------------*/

html {
    font-size: 100%;
    height: 100%;
    background-color: #f1f2f7;
}

html.boxed {
    background: #dddddd;
}

body {
    background-color: #f1f2f7;
    /*color: #f5f5f5;*/
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 0px !important;
    margin: 0px !important;
    line-height: 23px;
    font-style: normal;
    font-weight: normal;
    min-height: 100%;
}

body.boxed {
    margin: 0 auto !important;
    max-width: 90%;
    width: 90%;
    min-height: 100%;
    box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
}

body.boxed .page-topbar {
    max-width: 90%;
    width: 90%;
    margin-left: 5% !important;
}

/*body *{  vertical-align: top; }*/

.paddingLeft0 {
    padding-left: 0px;
}

.paddingRight0 {
    padding-right: 0px;
}

.bottom5 {
    margin-bottom: 5px;
}

.bottom10 {
    margin-bottom: 10px;
}

.bottom15 {
    margin-bottom: 15px;
}

.top15 {
    margin-top: 15px;
}

.right15 {
    margin-right: 15px;
}

.left15 {
    margin-left: 15px;
}

/*----------------------------------------
    Page Title and Breadcrumb
------------------------------------------*/

.page-title h1 {
    font-size: 30px;
    font-weight: 400;
    padding: 0;
    text-transform: uppercase;
    font-family: Oswald, Helvetica, Arial, sans-serif;
    color: rgba(118, 118, 118, 1.0);
    margin-bottom: 15px;
}

.page-title .breadcrumb {
    padding: 0px;
    margin: 15px 0;
}

.page-title {
    display: inline-block;
    width: 100%;
}

/*---------------------------------
    Typography
-----------------------------------*/

h1, h2, h3, h4, h5, h6 {
    /*  font-family: Oswald, Helvetica, Arial, sans-serif;*/

    margin: 10px 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #505458;
}

.light {
    font-weight: 100;
}

.bold {
    font-weight: 700;
}

.semi-bold {
    font-weight: 400;
}

blockquote, .blockquote-reverse, blockquote.pull-right {
    font-size: 16px;
    border-color: rgba(31, 181, 172, 1);
}

blockquote.pull-right {
    width: 100%;
}

blockquote.purple {
    border-color: rgba(153, 114, 181, 1.0);
}

blockquote.orange {
    border-color: rgba(250, 133, 100, 1.0);
}

blockquote.background {
    background: #f5f5f5;
}

.well {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background: #f5f5f5;
    border-color: #eaeaea;
}

.well.primary, .well.primary * {
    background-color: rgba(31, 181, 172, 1);
    color: #ffffff;
    border-color: rgba(31, 181, 172, 1);
}

.well.transparent {
    background-color: transparent;
}

a {
    color: rgba(31, 181, 172, 1);
}

a:hover, a:focus {
    color: #333333;
}

.text-dark {
    color: #333333;
}

.text-muted {
    color: #000000;
    font-size: 16px;
}

.text-primary {
    color: rgba(31, 181, 172, 1);
}

.text-info {
    color: rgba(35, 183, 229, 1.0);
}

.text-warning {
    color: #FDB45C;
}

.text-danger {
    color: rgba(240, 80, 80, 1.0);
}

.text-success {
    color: rgba(102, 189, 120, 1.0);
}

.text-purple {
    color: rgba(153, 114, 181, 1.0);
}

.text-orange {
    color: rgba(250, 133, 100, 1.0);
}

.text-light {
    color: #f5f5f5;
}

.bg-muted {
    background: #eaeaea;
    padding: 3px 8px;
}

.bg-primary {
    background: rgba(31, 181, 172, 1);
    padding: 3px 8px;
    color: #ffffff;
}

.bg-info {
    background: rgba(35, 183, 229, 1.0);
    padding: 3px 8px;
    color: #ffffff;
}

.bg-warning {
    background: #FDB45C;
    padding: 3px 8px;
    color: #ffffff;
}

.bg-danger {
    background: rgba(240, 80, 80, 1.0);
    padding: 3px 8px;
    color: #ffffff;
}

.bg-success {
    background: rgba(102, 189, 120, 1.0);
    padding: 3px 8px;
    color: #ffffff;
}

.bg-purple {
    background: rgba(153, 114, 181, 1.0);
    padding: 3px 8px;
    color: #ffffff;
}

.bg-orange {
    background: rgba(250, 133, 100, 1.0);
    padding: 3px 8px;
    color: #ffffff;
}

.bg-secondary {
    background: rgba(169, 169, 169, 1.0);
    padding: 3px 8px;
    color: #555555;
}

.bg-white {
    background: #ffffff;
    padding: 3px 8px;
    color: #777777;
}

/*-------------------------------
  Page Loading Progress Bar (PACE)
-----------------------------------*/

.pace .pace-progress {
    background: #1fb5ac;
    height: 3px;
}

.pace .pace-activity {
    top: 15px;
    right: 15px;
    width: 17px;
    height: 17px;
    border: solid 3px transparent;
    border-top-color: #1fb5ac;
    border-left-color: #1fb5ac;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/*----------------------------------------
  Page Top Bar
------------------------------------------*/

.page-topbar {
    /*min-height: 453px;*/
    position: relative;
    width: 100%;
    background-color: #ffffff;
    top: 0px;
    left: 0px;
    /*z-index: 1999;*/
    box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -o-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -ms-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -moz-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    -webkit-box-shadow: 0px 0px 5px rgba(86, 96, 117, 0.15);
    /*max-height: 453px;*/
}

.page-topbar .logo-area {
    width: 100%;
    background-color: #FFF;
    display: block;
    /*min-height: 453px;*/
    float: left;
}

.page-topbar .logo-area img {
    margin: auto;
    width: 100%;
    display: block;
}

/*----------------------------------------
  Sidebar Main Menu
------------------------------------------*/

.page-container.row-fluid {
    clear: both;
    display: block;
    position: relative;
    width: 100%;
}

.page-sidebar {
    height: auto;
    width: 100%;
    /*position: fixed;*/
    padding: 0px;
    /* background-color: rgba(50, 50, 58, 1.0); */
    background-color: #FFF;
    /*margin-top: 453px;*/
    overflow: hidden;
}

#main-menu-wrapper {
    padding-top: 0px;
    overflow: hidden;
    position: relative;
    height: 100%;
}

#main-menu-wrapper ul {
    padding: 0px;
    margin: 0px;
    padding-left: 0px;
    list-style-type: none;
    /*font-family: 'Oswald', Arial, Helvetica, sans-serif;*/
    font-weight: 300;
    font-size: 16px;
}

#main-menu-wrapper ul.wraplist {
    padding-bottom: 0px;
}

#main-menu-wrapper li ul.sub-menu {
    padding-left: 45px;
}

#main-menu-wrapper li ul.sub-menu ul.sub-menu {
    padding-left: 20px;
}

#main-menu-wrapper li ul.sub-menu {
    display: none;
    list-style-type: none;
    font-size: 14px;
    width: 100%;
}

#main-menu-wrapper li a {
    display: block;
    line-height: 45px;
    min-height: 45px;
    height: auto;
    color: #f1f1f1;
    color: rgba(214, 218, 223, 1.0);
    text-decoration: none;
    padding-left: 30px;
    clear: both;
}

#main-menu-wrapper li .sub-menu a {
    line-height: 36px;
    min-height: 36px;
}

#main-menu-wrapper li .sub-menu a {
    color: rgba(174, 178, 183, 1.0);
    margin-bottom: 2px;
    padding-left: 15px;
    border-left: 3px solid transparent;
}

#main-menu-wrapper li.open .sub-menu a.active, #main-menu-wrapper li.open .sub-menu a:hover, #main-menu-wrapper li .sub-menu a:hover {
    background-color: #212026;
    border-left: 3px solid rgba(31, 181, 172, 1);
}

#main-menu-wrapper li a:hover, #main-menu-wrapper li.open a {
    background-color: rgba(31, 181, 172, 1);
    color: #ffffff;
}

#main-menu-wrapper li a:hover .arrow:before, #main-menu-wrapper li.open a .arrow:before {
    color: rgba(234, 238, 243, 0.9);
}

#main-menu-wrapper li .sub-menu a:hover .arrow:before, #main-menu-wrapper li.open .sub-menu a .arrow:before {
    color: rgba(194, 198, 203, 0.65);
}

#main-menu-wrapper li.open .sub-menu a {
    background-color: transparent;
    color: rgba(174, 178, 183, 1.0);
}

#main-menu-wrapper li a i {
    display: inline-block;
    width: 45px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    top: -2px;
    position: relative;
}

#main-menu-wrapper li a .arrow:before {
    float: right;
    margin-top: 1px;
    margin-right: 20px;
    display: inline;
    font-size: 16px;
    font-family: FontAwesome;
    height: auto;
    content: "\f104";
    font-weight: 300;
    text-shadow: none;
    color: rgba(194, 198, 203, 0.65);
}

#main-menu-wrapper li.open a .arrow.open:before {
    content: "\f107";
}

#main-menu-wrapper li a .arrow {
    float: right;
}

#main-menu-wrapper .fa {
    font-size: 14px;
}

#main-menu-wrapper li .label {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 3px 7px;
    float: right;
    margin: 15px 15px 0 0;
}

#main-menu-wrapper li .label.nosubmenu {
    margin-right: 41px;
}

.page-sidebar.chat_shift #main-menu-wrapper li .label,
.page-sidebar.collapseit #main-menu-wrapper li .label {
    display: none;
}

.page-sidebar.chat_shift #main-menu-wrapper li:hover .label,
.page-sidebar.collapseit #main-menu-wrapper li:hover .label {
    display: inline-block;
    margin-top: -30px;
}

/*----------------------------------------
  Sidebar User Profile
------------------------------------------*/

.page-sidebar .profile-info {
    background: transparent;
    padding-top: 15px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 15px;
    border-bottom: #f3f3f3 1px solid;
}

.profile-image-circle {
    background: url("../images/hujiao/head_bor.png") no-repeat;
    background-size: 85px 85px;
    height: 85px;
    width: 85px;
    float: right;
    /*top: 5px;*/
    /*left: 5px;*/

}

.page-sidebar .profile-image {
    /*padding: 5px;*/
    /*padding-right: 5px;*/
    display: inline-block;
}

.profile-info .profile-image img {
    height: 65px;
    width: 65px;
    float: right;
    top: 10px;
    right: 10px;
    position: relative;
    background-color: #777777;
}

.profile-info .profile-message img {
    display: block;
    float: left;
    height: 45px;
    position: relative;
    right: 10px;
    top: 20px;
}

/*.profile-info .profile-details h3 {*/
/*margin: 10px 0 5px 0;*/
/*}*/

.profile-info .profile-details {
    display: block;
    position: relative;
    top: 20px;
}

.profile-info .profile-details span {
    /*font-family: 'Oswald', Arial, Helvetica, sans-serif;*/
    font-weight: 300;
    /*color: rgba(234, 238, 243, 1.0);*/
    font-size: 20px;
    line-height: 20px;
    text-decoration: none;
}

/*.username-text {*/
/*padding: 50px 0px 0px 50px;*/
/*}*/

.profile-info .profile-details .t {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    font-weight: 300;
    /*color: rgba(234, 238, 243, 1.0);*/
    font-size: 16px;
    line-height: 16px;
    text-decoration: none;
}

.profile-info .profile-details .profile-title {
    /*color: rgba(174, 178, 183, 1.0);*/
}

.profile-info .profile-details .profile-status {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: inline-block;
}

/*----------------------------------------
  Sidebar Fixed Bottom Graphs
------------------------------------------*/

.page-sidebar .project-info {
    position: relative;
    bottom: 0px;
    height: 40px;
    background-color: rgba(70, 70, 78, 1.0);
    width: 100%;
    display: block;
    overflow: hidden;
}

.page-sidebar .project-info .block1 {
    display: inline-block;
    height: 40px;
    padding: 8px 0 5px 30px;
}

.page-sidebar .project-info .block2 {
    display: inline-block;
    height: 40px;
    padding: 8px 0 5px 15px;
}

.page-sidebar .project-info .graph {
    float: left;
    width: 55px;
    padding: 5px 5px 5px 5px;
}

.page-sidebar .project-info .data {
    float: left;
    font-size: 10px;
    color: #aaaaaa;
    width: auto;
    white-space: nowrap;
    display: inline-block;
    padding-right: 5px;
}

.page-sidebar .project-info .data .title {
    display: block;
    line-height: 15px;
}

.page-sidebar .project-info .data .total {
    color: #dddddd;
    line-height: 12px;
    display: block;
    font-size: 11px;
}

/*----------------------------------------
  Comment Users
------------------------------------------*/

.comment-user {
    width: 100%;
    height: 75px;
}

.comment-user .profile-image img {
    width: 60px;
    height: 60px;
    float: right;
}

.comment-user .profile-message img {
    height: 20px;
}

/*----------------------------------------
  Download QRCode
------------------------------------------*/

.downloadInfo {
    background-color: #f5f5f5;
    bottom: 0;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.downloadTips {
    width: 75%;
    margin: 20px auto;
    display: block;
}

.downloadTips img {
    width: 70%;
}

.downloadContainer {
    width: 75%;
    margin: 10px auto;
    text-align: center;
}

.appStore {
    width: 40%;
    float: left;
}

.appStore img {
    width: 100%;
    margin: auto;
}

.android {
    width: 40%;
    float: right;
}

.android img {
    width: 100%;
    margin: auto;
}

.appStoreBtn {
    width: 40%;
    float: left;
    margin-top: 20px;
}

.appStoreBtn img {
    width: 80%;
    margin: auto;
}

.androidBtn {
    width: 40%;
    float: right;
    margin-top: 20px;
}

.androidBtn img {
    width: 80%;
    margin: auto;
}

.footer {
    background-color: #f5f5f5;
}

.footer img {
    margin-top: 30px;
    width: 100%;
}

.bg-white {
    background: #ffffff none repeat scroll 0 0;
    color: #777777;
    padding: 3px 8px;
}

.wid-blog-content {
    display: inline-block;
    padding: 30px;
    border-bottom: #f3f3f3 1px solid;
    width: 100%;
}

.wid-blog-content .pic-wrapper img {
    background: #aaaaaa none repeat scroll 0 0;
    border-radius: 50%;
    margin: 0 0 10px;
    max-height: 55px;
    max-width: 55px;
}

.wid-blog-content .info-wrapper .info {
    margin: 5px 0 10px;
}

.list-inline {
    list-style: outside none none;
    margin-left: -5px;
    padding-left: 0;
}

.list-inline > li {
    display: inline-block;
    padding-left: 0px;
    padding-right: 5px;
    font-weight: 500;
}

section header {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #f5f5f5;
    border-color: 1px solid #d7d7d7;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 100%;
}

.fa-location {
    background: url("../images/hujiao/map_b1.png") no-repeat scroll 0 0 / 12px 15px;
    height: 15px;
    width: 12px;
}

.fa-location_1 {
    background: rgba(0, 0, 0, 0) url("../images/hujiao/map_b.png") no-repeat scroll 0 0 / 12px 15px;
    height: 15px;
    width: 12px;
}

.comment {
    border-bottom: 1px solid #dddddd;
    display: block;
    height: 50px;
    margin: 15px 0 0;
    width: 100%;
}

.comment .pic-wrapper img {
    height: 42px;
    min-height: 42px;
    min-width: 42px;
    width: 42px;
}

.col-xs-10 {
    width: 66.6%;
}

.comment-input .pic-wrapper {
    width: 20%; float: left; position: relative;
}
.comment-input .info-wrapper {
    width: 60%; float: left; position: relative;
}

.form-control {
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #555;
    display: block;
    font-size: 14px;
    height: 40px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
}

.input-group {
    border-collapse: separate;
    position: relative;
}

.info img {
    height: 30px;
}
